<template>
  <div>
    <!-- 订阅股票 -->
    <div>
      <x-input
        name="stockInfo"
        v-model="codeOrName"
        auto-focus
        placeholder="输入股票代码或名称"
      />
      <x-button @click="subscribeStock">订阅</x-button>
    </div>
    <div>
      <button @click="deleteSubscription">删除</button><br />
      <x-table
        :full-bordered="false"
        :content-bordered="true"
        :cell-bordered="false"
        style="background-color: #fff"
      >
        <thead>
          <tr>
            <th>
              <check-icon :value.sync="allSelectCheckbox"></check-icon>
            </th>
            <th>代码</th>
            <th>名称</th>
            <th>最新价</th>
            <th>涨跌额</th>
            <th>涨跌幅</th>
            <th>提醒</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <check-icon :value.sync="allSelectCheckbox"></check-icon>
            </td>
            <td>Apple</td>
            <td>$1.25</td>
          </tr>
          <tr>
            <td>
              <check-icon :value.sync="allSelectCheckbox"></check-icon>
            </td>
            <td>Banana</td>
            <td>$1.20</td>
          </tr>
        </tbody>
      </x-table>

      <!-- <button type="primary" formType='submit'>删除</button>
    <view class="table">
      <view class="tr bg-w">
        <view class="td">
          <checkbox-group bindchange="allStockSelectChange">
            <checkbox value="allSelectCheckbox" checked="{{allSelect}}" />
          </checkbox-group>
        </view>
        <view class="th">代码</view>
        <view class="th">名称</view>
        <view class="th ">最新价</view>
        <view class="th ">涨跌额</view>
        <view class="th ">涨跌幅</view>
        <view class="th ">提醒</view>
      </view>
        <checkbox-group bindchange="multiStockSelectChange">
          <block
            wx:for="{{viewStockTransactionDataList}}"
            wx:key="code"
            wx:for-item="viewStockTransactionData"
          >
            <view class="tr bg-g">
              <view class="td">
                <checkbox
                  value="{{viewStockTransactionData.code}}"
                  checked="{{viewStockTransactionData.checked}}"
                />
              </view>
              <view class="td">{{ viewStockTransactionData.code }}</view>
              <view class="td">{{ viewStockTransactionData.name }}</view>
              <view class="td">{{ viewStockTransactionData.newestPrice }}</view>
              <view class="td">{{ viewStockTransactionData.upDownPrice }}</view>
              <view class="td">{{
                viewStockTransactionData.upDownPercentage
              }}</view> -->
      <!-- <view class="td">
          <image src='http://i0.jrjimg.cn/myjrj/member/myStock_v2017/ldgre.png' bindtap='remind'
            data-code='{{viewStockTransactionData.code}}' style='width:40rpx; height:40rpx;'></image>
        </view> -->
      <!-- <view class="td">
                <text
                  bindtap="remind"
                  data-code="{{viewStockTransactionData.code}}"
                >
                  {{
                    viewStockTransactionData.price_up == null &&
                    viewStockTransactionData.price_down == null &&
                    viewStockTransactionData.change_range == null
                      ? "关"
                      : "开"
                  }}
                </text>
              </view>
            </view>
          </block>
        </checkbox-group>
      </view> -->
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { XInput, XButton, XTable, CheckIcon } from "vux"
import * as constant from "@/components/constant"

Vue.prototype.$constant = constant;

export default {
  name: "RealTimeData",
  components: {
    XInput,
    XButton,
    XTable,
    CheckIcon,
  },
  data() {
    return {
      codeOrName: "",
      allSelectCheckbox: "",
    };
  },
  created() {},
  mounted() {
    this.getViewStockTransactionDataRegularly();
    setInterval(
      this.getViewStockTransactionDataRegularly,
      this.$constant.timing.timeForGettingViewStockTransactionDataRegularly
    );
  },
  /**
   * 订阅股票
   */
  methods: {
    /**
     * 定时地获取订阅的股票交易数据
     */
    getViewStockTransactionDataRegularly() {
      console.info(`时间：${new Date()}，开始定时地获取订阅的股票交易数据`);
    },
    subscribeStock(e) {
      console.log(this.codeOrName);
    },
    deleteSubscription() {},
  },
};
</script>

<style scoped>
.font1 {
  font: normal 600 12px/24px sans-serif;
}
.font2 {
  font: normal 500 12px/24px sans-serif;
  color: #bfbfbf;
}
.font3 {
  font: normal 600 12px/24px sans-serif;
  color: rgb(77, 172, 34);
}
.font4 {
  font: normal 600 12px/24px sans-serif;
  color: rgb(239, 64, 47);
}
.TLeft {
  text-align: left;
  padding-left: 10px;
  width: 40%;
}
.TCenter {
  text-align: center;
  width: 20%;
}
.TRight {
  text-align: right;
  padding-right: 10px;
  width: 40%;
}
</style>
